<template>
	<view>
		<!-- #ifdef MP-WEIXIN -->
		<view style="height: 25rpx"></view>
		<!-- #endif -->
		<view class="page-status-bar">
			<view class="title">发现</view>
			<view class="option">
				<view class="row" :class="type ? '' : 'active'" @click="switchType(0)">体系课</view>
				<view class="row" :class="type ? 'active' : ''" @click="switchType(1)">赛事</view>
			</view>
		</view>
		<view class="page-scroll">
			<swiper
				class="swiper"
				:indicator-dots="false"
				style="height: calc(100vh - 104rpx - var(--status-bar-height))"
				@change="switchChange"
				:current="type"
			>
				<swiper-item>
					<open-course></open-course>
				</swiper-item>
				<swiper-item>
					<articles />
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
import openCourse from './openCourse';
import articles from './articles';
export default {
	components: { openCourse, articles },
	data() {
		return {
			type: 0
		};
	},
	methods: {
		switchType(type) {
			this.type = type;
		},
		switchChange(res) {
			this.type = res.detail.current;
		},
		showFun() {
			const findType = parseInt(uni.getStorageSync('find-type') || 0);
			if (findType == 1) this.type = 1;
			uni.removeStorageSync('find-type');
		}
	}
};
</script>

<style lang="scss" scoped>
.page-status-bar {
	background-color: #ffffff;
	height: 88rpx;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;

	padding-top: calc(var(--status-bar-height) + 16rpx);
	.title {
		font-size: 36rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #1a2233;
		position: absolute;
		left: 32rpx;
	}
	.option {
		display: flex;
		height: 72rpx;
		background: #f0f2f5;
		border-radius: 16rpx;
		align-items: center;
		justify-content: space-between;
		padding: 0 6rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #585c66;
		.row {
			width: 194rpx;
			height: 60rpx;
			border-radius: 12rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.active {
			background: #ffffff;
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #1a2233;
		}
	}
}
</style>
